<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        /*router-link标签的默认样式名称，如果需要更改样式，定义该样式即可*/
        .router-link-active {
            font-weight: bold;
            font-size: 50px;
            color: aqua;
        }

        /*定义动画*/
        .v-enter,.v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }
        .v-leave-active, .v-enter-active {
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/login" >Login</router-link>
    <router-link to="/reg" tag="span">Register</router-link>
    <hr>
    <!--router-view是vue-router提供的一个标签，当路由到指定地址后将地址对应的组件渲染到该位置
    所以，router-view相当于一个占位-->
    <!--展示组件增加切换动画 使用transition 切换-->
    <!--mode out-in 先执行出场动画再执行入场动画-->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--引入vue-router，必须在vue之后引入，因为vue-router需要注册到vue中， 引入后就多了个全局的VueRouter对象-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    let login = {
        template: '<h1>login page</h1>'
    };
    let reg = {
        template: '<h1>register page</h1>'
    };

    // 引入vue-router.js后，可以直接使用vueRouter对象
    let router = new VueRouter({
        // routes代表一组路由地址，在此处配置路由地址映射
        routes: [
            // routes数组内每一个路由地址是一个对象，有两个必配的属性，path路径和component组件对象
            // component对应的是组件对象，不是组件的字符串名称
            {path: '/login', component: login},
            {path: '/reg', component: reg},
            // 为了让打开页面初始为登录页，可以通过路由的redirect属性配置跳转
            {path: '/', redirect: '/login'},
        ],
        // 有时候再使用router-link时，激活的样式需要自定义，此时可以定义默认的样式router-link-active
        // 如果需要自定义样式名称，或者使用第三方的样式，样式名称可以在此处自定义
        // linkActiveClass: 'myclass'
    });
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        components: {
        },
        router
    });
</script>
</body>
</html>
